{% extends 'base.html' %}

{% block before_head %}
<script>

var comment_url = '/api/blog/{{ blog.id }}/comment';

function page_select(n) {
    getApi(comment_url, {page: n}, function (err, result) {
        reloadComment(result);
    });
}

$(function () {
    $('#form_comment').submit(function (e) {
        e.preventDefault();
        showError();
        var content = $('#form_comment textarea').val().trim();
        if (content==='') {
            return showError('请输入评论内容！');
        }
        if (content.length < 6) {
            return showError('=.=多写几个字吧。。');
        }
        startLoading();
        postApi(comment_url, {content: content}, function (err, result) {
            if (err) {
                showError(err);
                stopLoading();
                return;
            }
            stopLoading();
            reloadComment(result);
        });
    });
});

</script>
{% endblock %}


{% block title %}{{blog.title}}{% endblock %}

{% block content %}
    <div class="uk-width-medium-3-4">
        <article class="uk-article uk-panel-box">
            <h2>{{ blog.title }}</h2>
            <p class="uk-article-meta">发表于:{{ blog.created_at|datetime }}</p>
            {{ blog.html_content |safe }}
        </article>

        <!-- <hr class="uk-article-divider"> -->
    {% if user %}
        <h4>发表评论</h4>
        <article class="uk-comment uk-panel-box">
            <header class="uk-comment-header">
                <img class="uk-comment-avatar uk-border-rounded" width="30" height="30" src="{{ user.image }}">
                <p class="uk-comment-title">{{ user.name }}</p>
            </header>
            <div class="uk-comment-body">
                <form id="form_comment" class="uk-form">
                    <div class="uk-form-row">
                        <textarea rows="5" placeholder="说点什么吧" style="width:100%;resize:none;"></textarea>
                    </div>
                    <div class="uk-form-row">
                        <button type="submit" class="uk-button uk-button-primary"><i class="uk-icon-comment"></i> 发表评论</button>
                    </div>
                    <div class="uk-alert uk-alert-danger uk-hidden"></div>
                </form>
            </div>
        </article>
        <!-- <hr class="uk-article-divider"> -->
    {% endif %}

        <h4>最新评论</h4>
        <ul class="uk-comment-list">
            {% include 'comment.html' %}
        </ul>

    </div>

    <div class="uk-width-medium-1-4">
        <div class="uk-panel uk-panel-box">
            <div class="uk-text-center">
                <img class="uk-border-rounded" width="120" height="120" src="{{ blog.user_image }}" />
                <h3>{{ blog.user_name }}</h3>
            </div>
        </div>
        <div class="uk-panel uk-panel-header">
            <h3 class="uk-panel-title">友情链接</h3>
            <ul class="uk-list uk-list-line">
                <li><i class="uk-icon-link"></i> <a href="#">编程</a></li>
                <li><i class="uk-icon-link"></i> <a href="#">思考</a></li>
                <li><i class="uk-icon-link"></i> <a href="#">读书</a></li>
            </ul>
        </div>
    </div>


{% endblock %}